﻿@using WSS.Models.Test
@using WSS.Pub
@{
    ViewBag.Title = "试题维护";
}
<div class="div_Content">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" id="basicInfo">
                        <span style="font-size: 14px;">基本信息</span>
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">

                    <form class="form-horizontal" role="form" id="form1">
                        <div style="margin-left: 15px; margin-top: 10px">
                            <div class="form-group">
                                <label for="" class="control-label" style="float: left;">试题类别：</label>
                                <div class="btn-group" style="margin-left: 15px;float: left;">
                                    <button class="btn btn-default btn-sm  dropdown-toggle" type="button" data-toggle="dropdown">
                                        <span id="CATE_NO_SPAN">请选择</span>  <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" id="btn_testqcate_menu">
                                    </ul>
                                    @Html.Hidden("CATE_NO")
                                </div>
                                          <label for="QUESTION_TYPE" class="control-label" style="margin-left: 15px;float: left;">试题题型：</label>
                                <div class="btn-group" style="margin-left: 15px;float: left;">
                                    <button class="btn btn-default btn-sm  dropdown-toggle" type="button" data-toggle="dropdown">
                                        <span id="QUESTION_TYPE_SPAN">单选题</span>  <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" id="QUESTION_TYPE_MENU">
                                        <li val="0"><a href="#" selval="0" seltext="单选题">单选题</a></li>
                                        <li val="1"><a href="#" selval="1" seltext="多选题">多选题</a></li>
                                        <li val="2"><a href="#" selval="2" seltext="判断题">判断题</a></li>
                                    </ul>
                                    @Html.Hidden("QUESTION_TYPE", 0)
                                </div>
                                     <label for="FLAG_INVALID" class="control-label" style="margin-left: 15px;float: left;">是否作废：</label>
                                <div class="btn-group" style="margin-left: 15px;float: left;">
                                    <button class="btn btn-default btn-sm  dropdown-toggle" type="button" data-toggle="dropdown">
                                        <span id="FLAG_INVALID_SPAN">否</span>  <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" id="FLAG_INVALID_MENU">
                                        <li val="0"><a href="#" selval="0" seltext="否">否</a></li>
                                        <li val="1"><a href="#" selval="1" seltext="是">是</a></li>
                                    </ul>
                                    @Html.Hidden("FLAG_INVALID", 0)
                                </div>
                                <div style="clear: both"></div>
                            </div>
                            <div class="form-group">
                                <label for="QUESTION_LEVEL" class="control-label" id="Label_QUESTION_LEVEL">难度等级：</label>
                                <div class="div_text">
                                    <input type="text" class="form-control" id="QUESTION_LEVEL" name="QUESTION_LEVEL" placeholder="请输入1-9等级值"
                                        onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
                                </div>

                            </div>
                            <div class="form-group">
                                <label for="QUESTION_NO" class="control-label">试题序号：</label>
                                <div class="div_text">
                                    <input type="text" class="form-control" id="QUESTION_NO" name="QUESTION_NO" placeholder="从小到大排列"
                                        onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
                                </div>

                            </div>
               
                            <div class="form-group">
                                <label for="QUESTION_TITLE" class="control-label">试题题目：</label>
                                <div class="div_text">
                                    <input type="text" class="form-control notnull" id="QUESTION_TITLE" name="QUESTION_TITLE">
                                </div>

                            </div>

                            <div class="form-group">
                                <label for="QUESTION_CONTENTS" class="control-label">试题描述：</label>
                                <div class="div_text">
                                    <textarea class="form-control" rows="3" name="QUESTION_CONTENTS" id="QUESTION_CONTENTS"></textarea>
                                </div>

                            </div>
                            <div class="form-group">
                                <label for="QUESTION_ANALYSIS" class="control-label">试题解析：</label>
                                <div class="div_text">
                                    <textarea class="form-control" rows="3" name="QUESTION_ANALYSIS" id="QUESTION_ANALYSIS"></textarea>

                                </div>

                            </div>





                        </div>

                        @Html.Hidden("QUESTION_ID")
                        <input type="hidden" name="TEST_ID" value="@ViewBag.TestID" id="TEST_ID"/>
                    </form>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" id="answerManager">
                        <span style="font-size: 14px;">答案维护</span>
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">

                    <form class="form-horizontal" role="form" id="form2">
                        @if (ViewBag.AnswerList!=null&&ViewBag.AnswerList.Count > 0)
                        {
                            int j = 0;
                            List<TEST_ANSWER> answerModel = ViewBag.AnswerList;
                            foreach (var aModel in answerModel)
                            {
                                j++;
                            <div style="margin-top: 10px; @if (j != answerModel.Count)
                                                          {
                                                                  @MvcHtmlString.Create(" border-bottom: 1px solid #ddd;")
                                                          }" id="@("answer_div_" + j)">
                                <div class="form-group">
                                    <label for="" class="control-label" style="float: left">答案序号：</label>
                                    <div class="btn-group" style="float: left;margin-left: 15px;">
                                        <button class="btn btn-default  btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
                                            <span spanid="ANSWER_NO">@aModel.ANSWER_NO</span>  <span class="caret"></span>
                                        </button>
                                        <input  type="hidden"  name="ANSWER_NO" value="@aModel.ANSWER_NO"/>

                                    </div>

                                    <label for="" class="control-label" style="float: left;margin-left: 15px;">正确答案：</label>
                                    <div class="btn-group" style="float: left;margin-left: 15px;">
                                        <button class="btn btn-default btn-sm  dropdown-toggle" type="button" data-toggle="dropdown">
                                            <span spanid="FLAG_ISRIGHT" @if (aModel.FLAG_ISRIGHT == 1)
                                                                        {
                                                                            @MvcHtmlString.Create("style='color:red'")
                                                                        }> @(aModel.FLAG_ISRIGHT == 0 ? "否" : "是")
                                            </span>  <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" ulid="FLAG_ISRIGHT">
                                            <li val="0"><a href="#" selval="0" seltext="否" selColor="" onclick="onClickRightAnswer(this,'answer_div_')">否</a></li>
                                            <li val="1"><a href="#" selval="1" seltext="是" selColor="red" onclick="onClickRightAnswer(this,'answer_div_')">是</a></li>
                                        </ul>
                                        <input  type="hidden"  name="FLAG_ISRIGHT" value="@aModel.FLAG_ISRIGHT"/>
                                    </div>

                                    <span class="fa fa-minus" style="float: right; cursor: pointer; @if (j == 1)
                                                                                                    {
                                                                                                            @MvcHtmlString.Create("display: none")
                                                                                                    }"   onclick=" deleteExistQAnswer(this, 'answer_div_') " ></span>
                                    <span class="fa fa-plus" style="float: right; margin-right: 15px; cursor: pointer" onclick=" addNewAnswer('answer_div_') "></span>
                                    <div style="clear: both"></div>
                                </div>
                                <div class="form-group">
                                    <label for="contents" class="control-label">答案：</label>
                                    <div class="div_text">
                                        <input type="text" class="form-control notnull" 
                                                   name="contents" value="@aModel.CONTENTS">
                                    </div>
                                </div>
                                <input type="hidden" name="ExistAnswer" value="@aModel.ANSWER_ID"/>
                            </div>
                            }

                        }
                        else
                        {
                            <div style="text-align: center;" id="EmptyAnswer_Div">
                                <span>该试题暂无答案项！</span>
                                <button type="button" class="btn btn-default" style="width: 80px; margin-left: 30px" onclick="addNewAnswer('newQuestionAnswer_','emptyAdd')">立即添加</button>
                            </div>
                        }

                    </form>
                    <form class="form-horizontal" role="form" id="form3" style="display: none;">
                        <div style="border-bottom: 1px solid #ddd" id="newQuestionAnswer_1">
                            <div class="form-group">
                                <label for="" class="control-label" style="float: left;margin-left: 15px;">答案序号：</label>
                                <div class="btn-group" style="float: left;margin-left: 15px;">
                                    <button class="btn btn-default  btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
                                        <span spanid="ANSWER_NO">A</span>  <span class="caret"></span>
                                    </button>
                                    <input type="hidden" name="ANSWER_NO" value="A" />

                                </div>

                                <label for="" class="control-label" style="float: left;margin-left: 15px;">正确答案：</label>
                                <div class="btn-group" style="float: left;margin-left: 15px;">
                                    <button class="btn btn-default btn-sm  dropdown-toggle" type="button" data-toggle="dropdown">
                                        <span spanid="FLAG_ISRIGHT">否</span>  <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" ulid="FLAG_ISRIGHT">
                                        <li val="0"><a href="#" selval="0" seltext="否" selColor="" onclick="onClickRightAnswer(this,'newQuestionAnswer_')">否</a></li>
                                        <li val="1"><a href="#" selval="1" seltext="是" selColor="red" onclick="onClickRightAnswer(this,'newQuestionAnswer_')">是</a></li>
                                    </ul>
                                    <input type="hidden" name="FLAG_ISRIGHT" value="0" />
                                </div>
                                <span class="fa fa-minus" style="float: right; cursor: pointer; display: none" onclick="deleteAnswer(this,'newQuestionAnswer_')"></span>
                                <span class="fa fa-plus" style="float: right; margin-right: 15px; cursor: pointer" onclick="addNewAnswer('newQuestionAnswer_')"></span>
                                <div style="clear: both"></div>
                            </div>
                            <div class="form-group">
                                <label for="contents" class="control-label">答案：</label>
                                <div class="div_text">
                                    <input type="text" class="form-control notnull"
                                        name="contents">
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group" style="margin-top: 15px;">
        <div style="text-align: center">
            <button type="button" class="btn btn-default" id="btn_clearAdd" style="width: 80px; margin-left: 30px" onclick="clearAdd()">添加试题</button>

            <button type="button" class="btn btn-default" id="btn_save" style="width: 80px; margin-left: 30px" onclick="save()">保存</button>

            <button type="button" class="btn btn-default" id="btn_close" style="width: 80px; margin-left: 30px" onclick="parent.closeWin()">关闭</button>
        </div>
    </div>
</div>

@section css
{
    <style type="text/css">

        .div_Content
        {
            border: 1px solid #ddd;
            border-radius: 4px 4px 0 0;
            box-shadow: none;
            padding: 5px;
            margin: 5px;
        }

        .form-group
        {
            width: 100%;
        }


            .form-group label
            {
                width: 10%;
                float: left;
                font-weight: normal;
            }

        .div_text
        {
            float: left;
            margin-left: 15px;
            width: 80%;
        }
    </style>
}

@section script
{
    <script src="@Url.Content("~/Scripts/jquery.json-2.2.min.js")"></script>

    <script type="text/javascript">
        $(function() {
            $("#btn_testqcate_menu").load("/testCenter/GetTestQCateToSelect", { addData: 1 }, function() {
                bindForm();
            });

            $("#QUESTION_TYPE_MENU li a").click(function() {
                $("#QUESTION_TYPE").val($(this).attr("selVal"));
                $("#QUESTION_TYPE_SPAN").text($(this).attr("selText"));
            });


            $("#FLAG_INVALID_MENU li a").click(function() {
                $("#FLAG_INVALID").val($(this).attr("selVal"));
                $("#FLAG_INVALID_SPAN").text($(this).attr("selText"));
            });
        });

        function bingSelectVal() {
            var questionType = $("#QUESTION_TYPE").val();
            if (questionType != "" && questionType != null) {
                $("#QUESTION_TYPE_SPAN").text($("#QUESTION_TYPE_MENU li[val='" + questionType + "']").find("a").html());
            } else {
                $("#QUESTION_TYPE_SPAN").text("单选题");
                $("#QUESTION_TYPE_SPAN").val(0);
            }
            var flagInvalid = $("#FLAG_INVALID").val();
            if (flagInvalid != "" && flagInvalid != null) {
                $("#FLAG_INVALID_SPAN").text(flagInvalid == 0 ? "否" : "是");
            } else {
                $("#FLAG_INVALID_SPAN").text("否");
                $("#FLAG_INVALID").val(0);
            }
            var cateNo = $("#CATE_NO").val();
            if (cateNo != "" && cateNo != null) {
                $("#CATE_NO_SPAN").text($("#btn_testqcate_menu li[CateNo='" + cateNo + "']").find("a").html());
            } else {
                $("#CATE_NO_SPAN").text("请选择");
            }
            if ($.trim($("#QUESTION_ID").val()) == "") {
                //当前操作为新增
                $("#CATE_NO_SPAN").text($("#btn_testqcate_menu li[CateNo='@ViewBag.QCateNo']").find("a").html());
                $("#CATE_NO").val(@ViewBag.QCateNo);
            }
        }

        function bindForm() {
            //获取当前数据详情
            $.ajax({
                url: "/testCenter/GetOneTestQModel",
                data: { id: '@ViewBag.QUESTION_ID' },
                async: false,
                type: 'POST',
                success: function (data) {
                    if (data.QUESTION_ID != null && data.QUESTION_ID!= "") {
                        mainfn.loadForm($("#form1"), data);
                    }
                    if ($.trim($("#QUESTION_NO").val()) == "") {
                        $("#QUESTION_NO").val(@ViewBag.QNewNo);
                    }
                    bingSelectVal();
                }
            });
        }

        function save() {

            if (mainfn.checkForm($("#form1"))) {
                //切换到第一个选项卡
                if ($("#collapseOne").attr("class").indexOf("in") == -1) {
                    $("#basicInfo").click();
                }
                return false;
            } else {
                if ($("div[id^=answer_div_]").size() > 0) {
                    //当前试题的答案项数据是否填写完整
                    if (mainfn.checkForm($("#form2"))) {
                        //切换到第二个选项卡
                        if ($("#collapseTwo").attr("class").indexOf("in") == -1) {
                            $("#answerManager").click();
                        }
                        return false;
                    }
                } else if ($("#form3").css("display") != "none") {
                    if (mainfn.checkForm($("#form3"))) {
                        //切换到第二个选项卡
                        if ($("#collapseTwo").attr("class").indexOf("in") == -1) {
                            $("#answerManager").click();
                        }
                        return false;
                    }
                } else if ($("div[id^=answer_div_]").size() == 0 && $("#form3").css("display") == "none") {
                    //该试题未添加任何答案项，提示用户添加
                    mainfn.msg("该试题下无任何答案选择，请补充！");
                    //切换到第二个选项卡
                    if ($("#collapseTwo").attr("class").indexOf("in") == -1) {
                        $("#answerManager").click();
                    }
                    addNewAnswer('newQuestionAnswer_', 'emptyAdd');
                    return false;
                }
            }
            //验证答案项是否完整
            var questionLevel = $("#QUESTION_LEVEL").val();
            if (questionLevel != "") {
                if (parseInt(questionLevel) > 9) {
                    $("#Label_QUESTION_LEVEL").html("请输入1-9等级值");
                    return false;
                }
            } else {
                $("#QUESTION_LEVEL").val(1);
            }
            var answerArray = new Array();
            var curDivId = $("#form2").size() == 0 ? "newQuestionAnswer_" : "answer_div_";
            $("div[id^='" + curDivId + "']").each(function() {
                var item = { ANSWER_NO: $(this).find("input[name='ANSWER_NO']").val(), FLAG_ISRIGHT: $(this).find("input[name='FLAG_ISRIGHT']").val(), CONTENTS: $(this).find("input[name='contents']").val() };
                answerArray.push(item);
            });
            $.ajax({
                url: "/testCenter/SaveTestQ",
                type: 'post',
                data: $('#form1').serialize() + "&answer=" + $.toJSON(answerArray),
                dataType: 'json',
                success: function(data) {
                    mainfn.msg(data.msg);
                }
            });
            return true;
        }

        function onClickMenu(val, text) {
            $("#CATE_NO").val(val);
            $("#CATE_NO_SPAN").text(text);
        }

        function onClickRightAnswer(obj, divId) {
            $(obj).parents("div[id^='" + divId + "']").find("input[name='FLAG_ISRIGHT']").val($(obj).attr("selVal"));
            $(obj).parents("div[id^='" + divId + "']").find("span[spanID='FLAG_ISRIGHT']").text($(obj).attr("selText"));
            $(obj).parents("div[id^='" + divId + "']").find("span[spanID='FLAG_ISRIGHT']").css("color", $(obj).attr("selColor"));
        }

        function clearAdd() {
            //清空数据
            $("#form1").get(0).reset();
            $("#QUESTION_CONTENTS").html("");
            $("#QUESTION_ANALYSIS").html("");

            $("#QUESTION_ID").val("");
            $("#QUESTION_NO").val("@ViewBag.QNewNo");

            $("#form2").remove();
            $("#form3").show();
            $("#form3 > div[id^='newQuestionAnswer_']:first").nextAll().remove();
            $("#newQuestionAnswer_1 input[name='contents']").val("");
            $("#newQuestionAnswer_1 span[spanID='FLAG_ISRIGHT']").text("否");
            $("#newQuestionAnswer_1 input[name='FLAG_ISRIGHT']").val(0);

            //切换到第一个选项卡
            if ($("#collapseOne").attr("class").indexOf("in") == -1) {
                $("#basicInfo").click();
            }
        }

        function deleteExistQAnswer(obj, divIdPrev) {
            var curAnswer = $(obj).parents("div[id^='answer_div_']").find("input[name='ExistAnswer']").val();
            if (curAnswer != "") {
                $.post("/testCenter/delAnswer", { id: curAnswer }, function() {
                });
            }
            deleteAnswer(obj, divIdPrev);
        }

        function addNewAnswer(divIdPrev, addType) {
            if (addType == "emptyAdd") {
                //维护试题时，该试题下无答案项
                $("#form3").show();
                $("#form2").remove();

            } else {
                //添加答案信息
                var answerDiv = $("#" + divIdPrev + "1").clone();
                var answerDivCount = $("div[id^=" + divIdPrev + "]").size();
                $(answerDiv).attr("id", divIdPrev + (answerDivCount + 1));
                $(answerDiv).css("margin-top", "10px");
                //重置数据
                $(answerDiv).find("input[name='contents']").val("");
                $(answerDiv).find("span[spanID='FLAG_ISRIGHT']").text("否");
                $(answerDiv).find("input[name='FLAG_ISRIGHT']").val(0);
                $("div[id^=" + divIdPrev + "]").last().after(answerDiv);

                var newAnswerDiv = $("#" + divIdPrev + (answerDivCount + 1));
                newAnswerDiv.find(".fa-minus").show();
                //赋值答案序号
                var startAnswerNo = "A";
                var startAnswerCode = startAnswerNo.charCodeAt();
                var newAnswerNo = String.fromCharCode(startAnswerCode + answerDivCount);
                newAnswerDiv.find("span[spanID='ANSWER_NO']").text(newAnswerNo);
                newAnswerDiv.find("input[name='ANSWER_NO']").val(newAnswerNo);
            }
        }

        function deleteAnswer(obj, divIdPre) {
            //重新赋值该答案项下答案项的序号
            var curAnswerDivId = $(obj).parents("div[id^=" + divIdPre + "]").attr("id");
            var curAnswerDivIndex = curAnswerDivId.substring(curAnswerDivId.lastIndexOf('_') + 1);
            var curAnswerNo = $("#" + divIdPre + curAnswerDivIndex).find("input[name='ANSWER_NO']").val();
            var curAnswerCode = curAnswerNo.charCodeAt();
            var newAnswerNo = "";

            var curAnswerDiv = $(obj).parents("div[id^=" + divIdPre + "]").nextAll();

            //移除项
            $(obj).parents("div[id^=" + divIdPre + "]").remove();

            //遍历赋值答案项
            $.each(curAnswerDiv, function(i) {
                newAnswerNo = String.fromCharCode(curAnswerCode + i);
                $(this).attr("id", divIdPre + (curAnswerDivIndex + i));
                $(this).find("span[spanID='ANSWER_NO']").text(newAnswerNo);
                $(this).find("input[name='ANSWER_NO']").val(newAnswerNo);
            });
        }

    </script>
}